import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/bar/lit-mix-line-bar.ts"
import {MixLineBarProps} from "../../../echarts/bar/lit-mix-line-bar.ts";

const meta: Meta<MixLineBarProps> = {
    title: 'Echarts/LitMixLineBar',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: MixLineBarProps): TemplateResult => {
        return html`<lit-mix-line-bar 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .legend=${args.legend}
            .xAxisData=${args.xAxisData}
            .yAxisName=${args.yAxisName}
            .yAxisUnit=${args.yAxisUnit}
            .yAxisInterval=${args.yAxisInterval}
            .yAxisRange=${args.yAxisRange}
            .seriesData=${args.seriesData}
            .seriesType=${args.seriesType}
            .seriesIndex=${args.seriesIndex}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        legend: { control: 'object' },
        xAxisData: { control: 'object' },
        yAxisName: { control: 'object' },
        yAxisUnit: { control: 'object' },
        yAxisInterval: { control: 'object' },
        yAxisRange: { control: 'object' },
        seriesData: { control: 'object' },
        seriesType: { control: 'object' },
        seriesIndex: { control: 'object' },
    },
};

export default meta;
type Story = StoryObj<MixLineBarProps>;

export const Default: Story = {
    args: {
        chartId: 'mix-line-bar-chart',
        width: '1200px',
        height: '600px',
        legend: ['Evaporation', 'Precipitation', 'Temperature'],
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        yAxisName: ['Precipitation', 'Temperature'],
        yAxisUnit: ['ml', '°C'],
        yAxisInterval: [50, 5],
        yAxisRange: [[0, 250], [0, 25]],
        seriesData: [
            [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        ],
        seriesType: ['bar', 'bar', 'line'],
        seriesIndex: [0, 0, 1],
    },
};